<template>
	<view class="clock-in-rule">
		<uni-nav-bar dark :fixed="true" :border="false" background-color="#FFFFFF" status-bar 
			title="打卡规则" left-icon="left" @clickLeft="toBack" color="#000" />
		<view class="clock-in-rule-body">
			<view style="width: 94%;margin: auto;">
				<u--form labelPosition="top" labelWidth="120" :model="clockinRule">
					<u-form-item label="规则类型：" borderBottom>
						<text v-if="clockinRule.ruleType === 0">个人规则</text>
						<text v-if="clockinRule.ruleType === 1">部门规则</text>
					</u-form-item>
					<u-form-item label="部门名称：" borderBottom v-if="clockinRule.ruleType === 1">
						<text>{{clockinRule.name}}</text>
					</u-form-item>
					<u-form-item label="上午签到时间：" borderBottom>
						<text>{{clockinRule.forenoonCheckinTime}}</text>
					</u-form-item>
					<u-form-item label="上午签退时间：" borderBottom>
						<text>{{clockinRule.forenoonCheckoutTime}}</text>
					</u-form-item>
					<u-form-item label="下午签到时间：" borderBottom>
						<text>{{clockinRule.afternoonCheckinTime}}</text>
					</u-form-item>
					<u-form-item label="下午签退时间：" borderBottom>
						<text>{{clockinRule.afternoonCheckoutTime}}</text>
					</u-form-item>
					<u-form-item label="打卡时间段：" borderBottom>
						<text style="display: block;">{{clockinRule.clockinTimePeriod}}分钟</text>
						<text style="display: block;">{{`上午 ${FCheckin} 后可开始打卡`}}</text>
						<text style="display: block;">{{`下午 ${ACheckin} 后可开始打卡`}}</text>
					</u-form-item>
				</u--form>
			</view>
<!-- 			<view class="img_box">
				<image :src="src"></image>
			</view> -->
		</view>
	</view>
</template>

<script>
	import amap from '../../libs/amap-wx.130.js';
	import attendanceApi from "../../request/attendanceApi.js";
	export default {
		data(){
			return {
				userInfo: {},
				clockinRule: {
					
				},
				holiday: {},
				src: "",
				FCheckin : "",
				ACheckin: "",
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync("loginUser");
			this.getClockinRule();
			
		},
		methods: {
			// 返回上个页面
			toBack() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，1表示返回上一页
					animationType: 'pop-out', // 页面关闭的动画效果
					animationDuration: 300, // 页面关闭的动画时间
				});
			},
			// 获取打卡规则
			getClockinRule() {
				attendanceApi.getClockinRule().then(res => {
					if (res.code === 200) {
						//console.log("打卡规则=>", res.data)
						this.clockinRule = res.data;
						this.init();
						// this.initMap();
					} else if (res.code === 204) {
						uni.showModal({
							title: '提示',
							content: '请联系管理员设置打卡规则',
							showCancel: false,
							success: (res) => {
								if (res.confirm) {
									console.log('用户点击确定');
									uni.navigateBack({
										delta: 1
									})
								}
							}
						});
					}
				})
			},
			// 计算
			init(){
				// 转化打卡时间段为秒
				const timePeriod = this.clockinRule.clockinTimePeriod * 60;
				const FCheckinTimeList = String(this.clockinRule.forenoonCheckinTime).split(":");
				const FCheckinTime = this.toSecond(FCheckinTimeList[0], FCheckinTimeList[1], FCheckinTimeList[2]);
				const ACheckinTimeList = String(this.clockinRule.afternoonCheckinTime).split(":");
				const ACheckinTime = this.toSecond(ACheckinTimeList[0],ACheckinTimeList[1],ACheckinTimeList[2]);
				this.FCheckin = this.toHMS(FCheckinTime-timePeriod);
				this.ACheckin = this.toHMS(ACheckinTime-timePeriod);
			},
			toSecond(hour,minute,second){
				return (parseInt(hour) * 60 * 60)+(parseInt(minute) * 60)+parseInt(second);
				
			},
			toHMS(second){
				const hours = Math.floor(second / 3600);
				const minutes = Math.floor((second % 3600) / 60);
				const secs = second % 60;
				return `${this.addZero(hours)}:${this.addZero(minutes)}:${this.addZero(secs)}`
			},
			//小于10的拼接上0字符串
			addZero(s) {
				return s < 10 ? ('0' + s) : s;
			},
			// 初始化地图
			// initMap(){
			// 	let _this = this;
			// 	let sizi = 0;
			// 	let paths = "10,0x0000ff,0.1,0x0000ff,0.7:116.31604,39.96491;116.320816,39.966606;116.321785,39.966827;116.32361,39.966957;116.39361,39.966957;116.39361,39.936957"
			// 	const query = uni.createSelectorQuery().in(this);
			// 	query.select(".img_box").fields({ size: true}, (data) =>{
			// 		sizi = data.width*data.height
			// 	} ).exec()
			// 	var AMap = new amap.AMapWX({key:"e2dd5d55c2509d3011e277b877b66ece"});
			// 	AMap.getStaticmap({
			// 		location: "116.31604,39.96491",
			// 		zoom: 10,
			// 		sizi: sizi,
			// 		paths: paths,
			// 		success: function(data){
			// 			console.log("data====>",data)
			// 			_this.src=data.url
			// 		},
			// 		fail: function(info){
			// 			_this.$tip.tip(info.errMsg)
			// 		}
			// 	});
			// }
		}
	}
</script>

<style>
	.clock-in-rule{
		min-height: 100vh;
		background-color: #eeeeef;
	}
	
	.clock-in-rule-body {
		background-color: #ffffff;
	}
	
	.img_box{
		position: absolute;
		width: 100%;
		height: 500rpx;
		background-color: aqua;
	}
	
	.img_box image{
	  width: 100%;
	  height: 100%;
	}
</style>